<template>
  <!-- 左侧显示 -->
  <el-row :gutter="30">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
    </el-breadcrumb>
    <el-col :span="6">
      <div class="grid-content bg-purple">

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px">个人信息</span>
          </div>
          <div>
            <a href="#" class="a1">
              <img :src="avatar" class="i1" @click="uploadImage" width="120px" height="120px" style="border-radius: 50%;margin-left: 70px"/>
            </a>
          </div>
          <el-divider></el-divider>
          <div class="d1">
            <span><i class="el-icon-user-solid"></i>用户名称</span>
            <span class="s1">{{loginName}}</span>
          </div>
          <el-divider></el-divider>
          <div class="d1">
            <span ><i class="el-icon-user"></i>用户账号</span>
            <span class="s1">{{userName}}</span>
          </div>
          <el-divider></el-divider>
          <div class="d1">
            <span><i class="el-icon-phone-outline"></i>手机号码</span>
            <span class="s1">{{phone}}</span>
          </div>
          <el-divider></el-divider>
          <div class="d1">
            <span><i class="el-icon-message"></i>用户邮箱</span>
            <span class="s1">{{email}}</span>
          </div>
          <el-divider></el-divider>
          <div class="d1">
            <span><i class="el-icon-s-custom"></i>用户性别</span>
            <span class="s1">{{sex}}</span>
          </div>
          <el-divider></el-divider>

          <!-- 上传图片的弹框 -->
          <el-dialog
              title="图片上传"
              :visible.sync="uploadImageDialogVisible"
              width="30%"
              >

            <el-upload
                class="avatar-uploader"
                action="http://localhost:60/sys/upload/uploadFile"
                :headers="importHeaders"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <span slot="footer" class="dialog-footer">
              <el-button @click="uploadImageDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateUserAvatarByUserId">确 定</el-button>
            </span>
          </el-dialog>


        </el-card>
      </div>
    </el-col>
    <!-- 右侧表单 -->
    <el-col :span="18">
      <div class="grid-content bg-purple-light">

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px">基本资料</span>
          </div>
          <div>
            <template>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <!--  基本资料  -->
                <el-tab-pane label="基本资料" name="first">
                  <el-form :model="userForm" status-icon :rules="userRules" ref="userRuleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="loginName">
                      <el-input type="text" v-model="userForm.loginName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="账号" prop="userName">
                      <el-input type="text" readonly v-model="userForm.userName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                      <el-input type="text" v-model="userForm.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phonenumber">
                      <el-input type="text" v-model="userForm.phonenumber" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                      <template>
                        <el-radio v-model="userForm.sex" label="1">男</el-radio>
                        <el-radio v-model="userForm.sex" label="0">女</el-radio>
                      </template>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="confirmUserForm">提交</el-button>
                      <el-button type="primary" @click="resetUser">重置</el-button>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                <!-- 修改密码 -->
                <el-tab-pane label="修改密码" name="second">

                  <el-form :model="passwordForm" status-icon :rules="passwordRules" ref="PasswordRuleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="旧密码" prop="oldPassword">
                      <el-input type="password" v-model="passwordForm.oldPassword" autocomplete="off" @blur="jiaoyanOldPassword" ></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                      <el-input type="password" v-model="passwordForm.newPassword" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="repeatNewPassword">
                      <el-input type="password" v-model="passwordForm.repeatNewPassword" autocomplete="off" @blur="panduanPassword"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" :disabled="confirmDisabled" @click="confirmPasswordForm">提交</el-button>
                      <el-button type="primary" @click="resetPassword">重置</el-button>
                    </el-form-item>
                  </el-form>

                </el-tab-pane>
              </el-tabs>
            </template>
          </div>
        </el-card>

      </div>
    </el-col>
  </el-row>
</template>

<script>
var mytoken = sessionStorage.getItem("token");
export default {
name: "personal",
  data(){
    return{
      avatar:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      //用户id
      userId:0,
      //用户名称
      loginName:'',
      //登录名称
      userName:'',
      //手机号
      phone:'',
      //邮箱
      email:'',
      //性别
      sex:'',
      //是否打开弹框
      uploadImageDialogVisible: false,
      importHeaders: {token: mytoken},
      imageUrl: '',
      //标签也的默认选项
      activeName: 'first',
      userForm:{},
      userRules:{
        loginName:[
          {required:true,message:"用户名不能为空",trigger:"blur"}
        ],
        userName:[
          {required:true,message:"账号不能为空",trigger:"blur"},
          {min:5,max:14,message: "账号的长度必须为5~14",trigger: "blur"}
        ],
        email:[
          {required:true,message:"邮箱不能为空",trigger:"blur"},
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }
        ],
        phonenumber:[
          {required:true,message:"手机号不能为空",trigger:"blur"},
          { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },
      passwordForm:{
        oldPassword:'',
        newPassword:'',
        repeatNewPassword:''
      },
      passwordRules:{
        oldPassword:[
          {required:true,message:"密码不能为空",trigger:"blur"},
          {min:5,max:14,message: "密码长度必须在5~14位之间",trigger: "blur"}
        ],
        newPassword:[
          {required:true,message:"密码不能为空",trigger:"blur"},
          {min:5,max:14,message: "密码长度必须在5~14位之间",trigger: "blur"}
        ],
        repeatNewPassword:[
          {required:true,message:"密码不能为空",trigger:"blur"},
          {min:5,max:14,message: "密码长度必须在5~14位之间",trigger: "blur"}
        ],
      },
      confirmDisabled: true

    }
  },
  created() {
    this.initUser();
  },
  methods: {
    //初始化该用户的信息
    initUser(){
      var that = this;
      this.$http.get("/sys/user/getOneUser").then(function (res){
        //console.log(res);
        that.userId = res.data.data.userId;
        that.avatar=res.data.data.avatar;
        that.loginName=res.data.data.loginName;
        that.userName=res.data.data.userName;
        that.phone=res.data.data.phonenumber;
        that.email=res.data.data.email;
        that.userForm = res.data.data;
        if (res.data.data.sex=='1'){
          that.sex="男";
        }else {
          that.sex="女";
        }

      })
    },
    //点击头像的弹框
    uploadImage(){
      this.uploadImageDialogVisible=true;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl=res.data;
    },
    //提交修改头像的弹框
    updateUserAvatarByUserId(){
      var that = this;
      var imgUrl=this.imageUrl;
      this.$http.post(`/sys/user/updateUserAvatarByUserId/${this.userId}/?avatar=${this.imageUrl}`).then(function (res){
        if (res.data.code==200){
          that.$message.success(res.data.msg);
          that.uploadImageDialogVisible = false;
          that.initUser();
        }else {
          that.$message.error(res.data.msg);
        }
      })
    },
    //标签页的方法
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    //用户表单的重置
    resetUser(){
      this.$refs.userRuleForm.resetFields();
    },
    //密码表单的重置
    resetPassword(){
      this.$refs.PasswordRuleForm.resetFields();
    },
    //提交用户表单的方法
    confirmUserForm(){
      //console.log(this.userForm)
      var that = this;
      this.$refs['userRuleForm'].validate((valid) => {
        if (valid) {
          that.$http.put("/sys/user/confirmUserForm",this.userForm).then(function (res){
            if (res.data.code == 200){
              that.$message.success(res.data.msg);
              that.initUser();
            }else {
              that.$message.error(res.data.msg);
            }
          })
        }
      })
    },
    //提交密码表单的方法
    confirmPasswordForm(){
      var that = this;
      this.$refs['PasswordRuleForm'].validate((valid) => {
        that.$http.put(`/sys/user/updatePassword/${this.userId}/${this.passwordForm.repeatNewPassword}`).then(function (res){
          if (res.data.code == 200){
            that.$message.success(res.data.msg);
            that.$router.push("/login")
          }else {
            that.$message.error(res.data.msg);
          }
        })
      })
    },
    //判断确认密码是否 和 新密码一致
    panduanPassword(){
      if (this.passwordForm.newPassword == this.passwordForm.repeatNewPassword){
        this.confirmDisabled=false;
      }else {
        this.$message.error("两次密码不一致")
        this.confirmDisabled=true;
      }
    },
    //输入旧密码 判断密码是否正确
    jiaoyanOldPassword(){
      //console.log(this.passwordForm.oldPassword)
      var that = this;
      //console.log(this.passwordForm.oldPassword);
      if (this.passwordForm.oldPassword != ''){
        this.$http.get(`/sys/user/jiaoyanOldPassword/${this.userId}/${this.passwordForm.oldPassword}`).then(function (res){
          if (res.data.code != 200){
            that.$message.error(res.data.msg);
          }
        })
      }
    }
  }
}
</script>

<style>
.d1{
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
.s1{
  margin-right: 10px;
}
.i1:hover{
  background-color: red;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>